<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta charset="utf-8" />
	<title>详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/public.css">
	<link rel="stylesheet" href="css/shoppingcar.css">
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/angular-1.5.6.js"></script>
	<script>
		var app = angular.module('app',[]);
		app.controller('shop1',function($scope){
			$scope.price=188;
			$scope.num=1;
			$scope.add=function(){
				$scope.num++;
			};
			$scope.reduce=function(){
				if($scope.num==1){
					return;
				}else{
					$scope.num--;
				}
			}
		})
		app.controller('shop2',function($scope){
			$scope.price=168;
			$scope.num=1;
			$scope.add=function(){
				$scope.num++;
			};
			$scope.reduce=function(){
				if($scope.num==1){
					return;
				}else{
					$scope.num--;
				}
			}
		})
	</script>
</head>
<body id="bodyBox">
	<header id="head">
		<div class="categoryBj">
			<div class="goBack">
				<a href="index.html"><span>返回上一页</span></a>
			</div>
			<div class="headTitle">购物车</div>
			<div class="rightInfo">
				<a href="javascript:;" class="openMenu"><span></span></a>
			</div>
		</div>
		<ul class="menu">
			<li><a href="index.html"><span class="toIndex"></span><strong>首页</strong></a></li>
			<li><a href="category.html"><span class="sortSearch"></span><strong>分类搜索</strong></a></li>
			<li><a href="shoppingcar.html"><span class="shopCar"></span><strong>购物车</strong></a></li>
			<li><a href="my.html"><span class="myHome"></span><strong>我的某东</strong></a></li>
		</ul>
	</header>
	<section class="shopping">
		<div class="shoppingHead">
			<span>
				<i></i>
				<span class="shoppingHeadInfo">您正在安全购物环境中，请放心购物</span>
			</span>
		</div>
		<div class="shopGroup">
			<div class="shopGroupInfo">
				<div class="shopGroupInfoTitle">
					<div class="title-item">
						<div class="clickIcon">
							<span class="shop1"></span>
						</div>
						<div class="titleCon">
							<span><img src="img/shopitemicon.png"></span>
							<a href="javascript:;">沿淮母婴专营店</a>
						</div>
					</div>
				</div>
				<ul class="shopGroupInfoCon">
					<li class="shopGroupProduct">
						<p class="discount">
							<a href="javascript:;" class="discountLink">
								<span class="discountLinkS1"><span>满减</span><i></i></span>
								<span class="discountLinkS2"><span>购满200.00元，可减5.00元</span></span>
								<span class="discountLinkS3"><span>去凑单</span></span>
							</a>
						</p>
						<div class="imageText">
							<div class="clickIcon">
								<span class="shop1"></span>
							</div>
							<div class="imageTextInfo">
								<a href="javascript:;" class="imageLink">
									<img src="img/babycar.jpg">
								</a>
								<div class="textInfo" ng-controller="shop1">
									<a href="javascript:;">
										<span>杰里米男女童车儿童自行车14寸16寸12寸带辅轮  3/6/8岁小孩山地车宝宝 小学生单车 18寸带水壶车篮</span>
									</a>
									<span>颜色:18寸带水壶车篮</span>
									<div class="unitQuantity">
										<span class="price">&yen;<strong>{{price}}</strong>.00</span>
										<div class="selectQuantity">
											<a href="javascript:;" class="reduce" ng-click="reduce()"></a>
											<input type="tel" name="num" value="{{num}}" disabled >
											<a href="javascript:;" class="plus" ng-click="add()"></a>
										</div>
									</div>
								</div>
								<div class="edit">
									<div class="editBtn">
										<a href="javascript:;"><span>编辑</span></a>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="shopGroup">
			<div class="shopGroupInfo">
				<div class="shopGroupInfoTitle">
					<div class="title-item">
						<div class="clickIcon">
							<span class="shop2"></span>
						</div>
						<div class="titleCon">
							<span><img src="img/shopitemicon.png"></span>
							<a href="javascript:;">鹏华依美服装专营店</a>
						</div>
					</div>
				</div>
				<ul class="shopGroupInfoCon">
					<li class="shopGroupProduct">
						<div class="imageText">
							<div class="clickIcon">
								<span class="shop2"></span>
							</div>
							<div class="imageTextInfo">
								<a href="javascript:;" class="imageLink">
									<img src="img/vest1.jpg">
								</a>
								<div class="textInfo" ng-controller="shop2">
									<a href="javascript:;">
										<span>88元4件 】2017年夏季新圆领体恤男装夏季半袖衣服潮流韩版印花短袖T恤男士 13白+B14白+B15白+B16白 3XL</span>
									</a>
									<span>颜色:13白+B14白+B15白+B16白</span>
									<div class="unitQuantity">
										<span class="price">&yen;<strong>{{price}}</strong>.00</span>
										<div class="selectQuantity">
											<a href="javascript:;" class="reduce" ng-click="reduce()"></a>
											<input type="tel" name="num" value="{{num}}" disabled >
											<a href="javascript:;" class="plus" ng-click="add()"></a>
										</div>
									</div>
								</div>
								<div class="edit">
									<div class="editBtn">
										<a href="javascript:;"><span>编辑</span></a>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="shopGroupProduct s1">
						<div class="imageText">
							<div class="clickIcon">
								<span class="shop2"></span>
							</div>
							<div class="imageTextInfo">
								<a href="javascript:;" class="imageLink">
									<img src="img/vest.jpg">
								</a>
								<div class="textInfo" ng-controller="shop2">
									<a href="javascript:;">
										<span>【88元4件 】2017年夏季新圆领体恤男装夏季半袖衣服潮流韩版印花短袖T恤男士 04白+B06白+B14黑+B15黑 2XL</span>
									</a>
									<span>颜色:04白+B06白+B14黑+B15黑</span>
									<div class="unitQuantity">
										<span class="price">&yen;<strong>{{price}}</strong>.00</span>
										<div class="selectQuantity">
											<a href="javascript:;" class="reduce" ng-click="reduce()"></a>
											<input type="tel" name="num" value="{{num}}" disabled >
											<a href="javascript:;" class="plus" ng-click="add()"></a>
										</div>
									</div>
								</div>
								<div class="edit">
									<div class="editBtn">
										<a href="javascript:;"><span>编辑</span></a>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</section>
	<footer style="height: 50px">
		<div class="settlement">
			<div class="clickIcon select">
				<span></span>
				<strong>全选</strong>
			</div>
			<div class="total" ng-controller="shop2">
				<strong>合计:<span class="totalPrice">0.00</span></strong><br />
				<span class="totalbottom">
					总额:
					<span>0.00</span>
					立减:
					<span>0.00</span>
				</span>
				<a href="javascript:;" class="count">去结算</a>
			</div>
		</div>
	</footer>
	<script>
		/*显示隐藏*/
		$('.openMenu').toggle(function(){
			$('.menu').slideDown();
		},function(){
			$('.menu').slideUp();
		})

		/*找到要点击的店铺*/
		var titleShop1 = $('.title-item .clickIcon .shop1');
		var imgTextShop1 = $('.imageText .clickIcon .shop1');
		var titleShop2 = $('.title-item .clickIcon .shop2');
		var imgTextShop2 = $('.imageText .clickIcon .shop2');
		/*底部全选*/
		var select=$('.select');

		/*第一家店点击单选全选*/
		titleShop1.toggle(function(){
			titleShop1.addClass('active');
			imgTextShop1.addClass('active');
		},function(){
			titleShop1.removeClass('active');
			imgTextShop1.removeClass('active');
		});
		imgTextShop1.toggle(function(){
			titleShop1.addClass('active');
			imgTextShop1.addClass('active');
		},function(){
			titleShop1.removeClass('active');
			imgTextShop1.removeClass('active');
		});

		/*第二家店点击单选全选*/
		titleShop2.toggle(function(){
			titleShop2.addClass('active');
			imgTextShop2.addClass('active');
		},function(){
			titleShop2.removeClass('active');
			imgTextShop2.removeClass('active');
		});
		imgTextShop2.toggle(function(){
			titleShop2.addClass('active');
			imgTextShop2.addClass('active');
		},function(){
			titleShop2.removeClass('active');
			imgTextShop2.removeClass('active');
		});
		/*全选*/
		select.toggle(function(){
			select.find('span').addClass('active');
			titleShop1.addClass('active');
			imgTextShop1.addClass('active');
			titleShop2.addClass('active');
			imgTextShop2.addClass('active');
		},function(){
			select.find('span').removeClass('active');
			titleShop1.removeClass('active');
			imgTextShop1.removeClass('active');
			titleShop2.removeClass('active');
			imgTextShop2.removeClass('active');
		})

		/*找爹*/
		var ancestors =$('.shop2').parents('.shopGroupProduct');
		
	</script>
</body>
</html>